<template>
    <div>
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">阅卷</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">考试试卷</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">答题卡11</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div style="margin: 20px">
        <div class="grid" v-for="item in studentQuestionList" v-bind:key="item.id">
          <div class="item basic-info">
            <div class="title"><i class="el-icon-s-order"></i>题目</div>
            <div style="margin-left: 20px; margin-top: 20px">
              <div style="font-size: 15px; font-weight: bold">{{item.stem}}</div>
            </div>
            <div class="title"><i class="el-icon-s-order"></i>标答</div>
            <div style="margin-left: 20px; margin-top: 20px">
              {{item.answer}}
            </div>
            <div class="title"><i class="el-icon-s-order"></i>学生答案</div>
            <div style="margin-left: 20px; margin-top: 20px">
              {{item.studentAnswer}}
            </div>
          </div>
          <div class="item check-info">
            <div class="title">
              <i class="el-icon-document-checked"></i>
              批阅
            </div>
            <div class="text">题目分数：{{score}}</div>
            <div class="text">学生得分：</div>
            <el-input-number style="width:80%;margin-left: 10%; margin-top: 10px" v-model="item.scoreGet" :min="0" :max="score" @change="updateScore"></el-input-number>
          </div>
        </div>
      </div>

      <div style="width: 100%;">
        <div class="title">该答题卡主观题总分：{{scoreGet}}</div>
        <el-button type="primary" style="margin-top:20px;width:40%;margin-bottom: 20px" @click="updateSubjectiveQuestion">提交</el-button>
        <el-button style="margin-top:20px;width:40%;margin-bottom: 20px" @click="back">返回</el-button>
      </div>
    </div>
</template>

<script>
import {getStudentAnswer, updateSubjectiveQuestion} from '../../../api/exam'
import {queryById} from '../../../api/questions'
export default {
  name: 'AnswerPaperDetail.vue',
  data () {
    return {
      answerPaperId: 0,
      questionIds: [],
      score: 0,
      scoreGet: 0,
      // 主观题答案
      studentQuestionList: [
        {
          id: 0,
          stem: '',
          answer: '',
          studentAnswer: '',
          scoreGet: 0
        }
      ],
      // 分数
      answerList: [
        {
          questionId: 0,
          pointGet: 20
        }
      ]
    }
  },
  mounted () {
    this.answerPaperId = this.$route.query.id
    this.score = parseInt(this.$route.query.score)
    this.questionIds = this.$route.query.questionIds
    this.getQuestion()
  },
  methods: {
    // 转换格式
    transformAnswerList () {
      this.answerList = []
      this.studentQuestionList.forEach(question => {
        this.answerList.push({
          questionId: parseInt(question.id),
          pointGet: question.scoreGet
        })
      })
    },
    // 获取信息
    getQuestion () {
      this.studentQuestionList = []
      this.questionIds.forEach(questionId => {
        queryById(questionId).then(res => {
          if (res.data.errorCode === 0) {
            let temp = {
              id: questionId,
              stem: JSON.parse(res.data.data.list[0].questionStem).stem,
              answer: res.data.data.list[0].answer,
              studentAnswer: '',
              scoreGet: 0
            }
            //  根据题目id查找答案
            getStudentAnswer({questionId: questionId, answerPaperId: this.answerPaperId}).then(innerRes => {
              console.log(res)
              if (innerRes.data.errorCode === 0) {
                temp.studentAnswer = innerRes.data.data
                this.studentQuestionList.push(temp)
              } else {
                this.$message.error(innerRes.data.message)
              }
            })
          } else {
            this.$message.error(res.data.message)
          }
        })
      })
    },
    // 更新分数
    updateScore () {
      let temp = 0
      this.studentQuestionList.forEach(question => {
        temp += question.scoreGet
      })
      this.scoreGet = temp
    },
    // 提交分数
    updateSubjectiveQuestion () {
      this.transformAnswerList()
      console.log(this.answerList)
      updateSubjectiveQuestion({answerPaperId: this.answerPaperId, score: this.scoreGet, answerList: this.answerList}).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.$message.success('更新主观题分数成功！')
          this.$router.go(-1)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .grid{
    display: grid;
    grid-template-columns: 75% 25%;
    grid-auto-flow: row dense;
  }

  .item {
    text-align: left;
    border: 1px solid #e5e4e9;
    height: auto;
    padding-bottom: 20px;
  }

  .title {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bolder;
  }

  .text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 15px;
  }

  .basic-info {
    grid-column-start: 1;
    grid-column-end: 2;
    padding: 10px;
  }

  .check-info {
    grid-column-start: 2;
    grid-column-end: 3;
  }
</style>
